<template>
  <tiny-grid
    :data="tableData"
    show-overflow="tooltip"
    :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
  >
    <tiny-grid-column type="index" width="60"></tiny-grid-column>
    <tiny-grid-column
      field="id"
      title="名称（Popeditor）"
      :editor="{ component: TinyPopeditor, attrs: getPopEditorOp }"
      :format-config="{
        type: 'enum',
        async: true,
        data: popeditOptions,
        label: 'name',
        value: 'id'
      }"
    ></tiny-grid-column>
    <tiny-grid-column
      field="createdDate"
      title="创建时间"
      :editor="{ component: 'input', attrs: { type: 'datetime-local' } }"
    ></tiny-grid-column>
    <tiny-grid-column field="employees" title="人数" :editor="{ component: 'input' }"></tiny-grid-column>
    <tiny-grid-column field="introduction" title="公司简介"></tiny-grid-column>
  </tiny-grid>
</template>

<script setup lang="jsx">
import { ref, onMounted } from 'vue'
import { TinyGrid, TinyGridColumn, TinyPopeditor } from '@opentiny/vue'

const popeditOptions = ref([])
const tableData = ref([
  {
    id: '1',
    name: 'GFD 科技 YX 公司',
    introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
    employees: 800,
    createdDate: '2014-04-30 00:56:00'
  },
  {
    id: '2',
    name: 'WWW 科技 YX 公司',
    introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
    employees: 300,
    createdDate: '2016-07-08 12:36:22'
  },
  {
    id: '3',
    name: 'RFV 有限责任公司',
    introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
    employees: 1300,
    createdDate: '2014-02-14 14:14:14'
  },
  {
    id: '4',
    name: 'TGB 科技 YX 公司',
    introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
    employees: 360,
    createdDate: '2013-01-13 13:13:13'
  },
  {
    id: '5',
    name: 'YHN 科技 YX 公司',
    introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
    employees: 810,
    createdDate: '2012-12-12 12:12:12'
  }
])

onMounted(() => {
  getOptions().then((data) => {
    popeditOptions.value = data
  })
})

function getPopEditorOp() {
  return {
    valueField: 'id',
    textField: 'name',
    remoteSearch,
    gridOp: {
      columns: [
        {
          field: 'id',
          title: 'ID',
          width: 60
        },
        {
          field: 'name',
          title: '名称'
        },
        {
          field: 'province',
          title: '省份',
          width: 80
        },
        {
          field: 'city',
          title: '城市',
          width: 80
        }
      ],
      data: []
    }
  }
}

function getOptions() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve([
        {
          id: '1',
          name: 'GFD 科技 YX 公司',
          city: '福州',
          province: '福建省'
        },
        {
          id: '2',
          name: 'WWW 科技 YX 公司',
          city: '深圳',
          province: '广东省'
        },
        {
          id: '3',
          name: 'RFV 有限责任公司',
          city: '中山',
          province: '广东省'
        },
        {
          id: '4',
          name: 'TGB 科技 YX 公司',
          city: '龙岩',
          province: '福建省'
        },
        {
          id: '5',
          name: 'YHN 科技 YX 公司',
          city: '韶关',
          province: '广东省'
        }
      ])
    }, 200)
  })
}

function remoteSearch() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ data: popeditOptions.value, total: 200 })
    }, 500)
  })
}
</script>
